<template>
  <div class="unusual-info-dialog-page">
    <el-dialog
      :model-value="props.dialogVisible"
      title="通知消息"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-row :gutter="16">
        <el-col class="info-item" :span="12" v-for="(item, index) in infoData" :key="index">
          <span class="label">{{item.label}}:</span>
          <span class="value">11</span>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="UnusualInfoDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const infoData = ref<any>([
  { label: '用户姓名', prop: '' },
  { label: '备注名称', prop: '' },
])

// 关闭弹窗
const handleClose = () => {
  proxy?.$emit('update:dialogVisible', false)
}
</script>

<style lang="stylus" scoped>
.unusual-info-dialog-page
  .info-item
    margin-bottom 16px
    .label
      width 80px
      display inline-block
      text-align right
      color black
      font-weight bold
    .value
      margin-left 4px
</style>
